<template>
	<el-container>
		<el-aside width="200px" v-loading="showDicloading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="dic" class="menu" node-key="item" :data="dicList" :props="dicProps" :current-node-key="''"
							 :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode"
							 @node-click="dicClick">
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" v-auth="'sys:dict:add'" icon="el-icon-plus" @click="addInfo"></el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.dict_sub_val" placeholder="字典关键词"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						<el-button type="info" @click="resetUpsearch">重置</el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams"
						 @selection-change="selectionChange" stripe>
					<el-table-column type="selection" min-width="50"></el-table-column>
					<el-table-column label="字典ID" prop="id" min-width="80"></el-table-column>
					<el-table-column label="字典项" prop="dict_item_name" min-width="120"></el-table-column>
					<el-table-column label="字典子值" prop="dict_sub_val" min-width="150"></el-table-column>
					<el-table-column label="字典项扩展字段" prop="dict_sub_val_ext" min-width="450"></el-table-column>
					<el-table-column label="排序" prop="sort_order" min-width="80"></el-table-column>
					<el-table-column label="是否启用" prop="status" min-width="100">
						<template #default="scope">
							<el-switch v-model="scope.row.status" :loading="scope.row.$switch_status" active-value="1"
									   inactive-value="0" disabled></el-switch>
						</template>
					</el-table-column>
					<el-table-column label="更新时间" prop="updated_at" min-width="150"></el-table-column>
					<el-table-column label="更新人" prop="updated_by" min-width="150"></el-table-column>
					<el-table-column label="操作" fixed="right" align="right" min-width="80">
						<template #default="scope">
							<el-button-group>
								<el-button text type="primary" v-auth="'sys:dict:edit'" size="small"
										   @click="table_edit(scope.row, scope.$index)">编辑
								</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
	<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess"
				 @closed="dialog.list = false"></list-dialog>
</template>

<script>
import listDialog from './list'

export default {
	name: 'dic',
	components: {
		listDialog
	},
	data() {
		return {
			dialog: {
				dic: false,
				info: false
			},
			showDicloading: true,
			dicList: [],
			dicFilterText: '',
			dicProps: {
				value: "item",
				label: "value"
			},
			listApi: this.$API['sys.dict'].index,
			listApiParams: {
				dict_item: null
			},
			selection: [],
			search: {
				dict_sub_val: null
			}
		}
	},
	watch: {
		dicFilterText(val) {
			this.$refs.dic.filter(val);
		}
	},
	mounted() {
		this.getDic()
	},
	methods: {
		//加载树数据
		async getDic() {
			let res = await this.$API['sys.dict'].itemList.get();
			this.showDicloading = false;
			let allNode = {item: '', value: '所有'}
			res.data.unshift(allNode);
			this.dicList = res.data;

		},

		//树过滤
		dicFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},

		//树点击事件
		dicClick(data) {
			let params = {
				dict_item: data.item
			}
			if (data.name == '所有') {
				params.dict_item = '';
			}
			this.$refs.table.reload(params)
		},


		//添加字典
		addInfo() {
			this.dialog.list = true
			this.$nextTick(() => {
				let dicCurrentKey = this.$refs.dic.getCurrentKey();
				const data = {
					dic: dicCurrentKey,
					status: "1"
				}
				this.$refs.listDialog.open().setData(data)
			})
		},

		//编辑字典
		table_edit(row) {
			this.dialog.list = true
			this.$nextTick(() => {
				this.$refs.listDialog.open('edit').setData(row)
			})
		},

		//本地更新数据
		handleListSuccess(data, mode) {
			if (mode == 'add') {
				data.id = new Date().getTime()
			} else if (mode == 'edit') {
				this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
					Object.assign(item, data)
				})
			}
			this.$refs.table.refresh()
		},

		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},

		//搜索重置
		resetUpsearch() {
			this.search = {};
			this.$refs.table.reload(this.search)
		},
	}
}
</script>

<style></style>
